<template>
	<div class="coupon">
		
		<!-- 优惠券 -->
		<div class="nav-left">
			<!-- 创建优惠券 -->
			<div class="nle-classify">
				
				<div :class="(item.residue==0 ? 'nle-cla-tacit' : 'nle-cla-son')" v-for="(item,key) in typestate.slice(0,4)" :key="key">
					<div :class="(item.residue != 0 ? 'nle-cla-son-data' : 'nle-cla-son-text')">
						<h4>{{item.name}}：<p :class="item.result.length<6? 'n-c-s-big':'n-c-s-small' ">{{item.result}}</p></h4>
						<router-link :to="'/sum/'+item.id" v-if="item.residue != 0" title="点击查看详情">详情</router-link>
					</div>
					<div class="nle-cla-son-residue" v-if="item.residue != 0">剩余：<p>{{item.residue}}</p></div>
				</div>
				
			</div>
			<!-- 筛选和排序 -->
			<div class="nle-details">
				<!-- 条件查询以及删除 -->
				<div class="nle-det-screen">
					<div class="nle-det-scr-term">
						<el-form ref="form" :model="form" label-width="90px">
							<el-form-item label="优惠名称">
								<el-input v-model="form.name" status-icon="true" placeholder="请输入优惠券名称"></el-input>
							</el-form-item>
							<el-form-item label="优惠券类型">
								<el-select v-model="form.region" @change="onSubmit">
									<el-option v-for="(item,key) in typestate.slice(0,4)" :key="key" :label="item.type" :value="item.id.toString()"></el-option>
								</el-select>
							</el-form-item>
						</el-form>
					</div>
				    <div class="nle-det-scr-choice"><div class="nds-cho-btn">筛选</div><p>清空筛选条</p></div>
						
				</div>
				<!-- 优惠券的详细数据 -->
				<div class="nle-det-sort">
					
					<el-menu :default-active="activeIndex" class="el-menu-vertical-demo" mode="horizontal"><!--  @select="handleSelect" -->
						<el-menu-item  v-for="(item,index) in typestate.slice(0,4)" :key="index" :index="item.id.toString()" >{{item.state}}</el-menu-item>
						<p class="n-d-s-hint">*下方红色的数据可以点击查看详情</p>
					</el-menu>
					
					<div class="nled-sort-details">
						<div class="nled-sdet-title">
							<div class="grid-content">店长</div>
							<div class="grid-content">用户名</div>
							<div class="grid-content">优惠券名称</div>
							<div class="grid-content">商品</div>
							<div class="grid-content">商家名称</div>
							<div class="grid-content">门店名称</div>
							<!-- <div class="grid-content">商家名称</div> -->
							<div class="grid-content">领取时间</div>
						</div>	
						
						<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
							<el-checkbox v-for="(item,key) in ticket" :label="item"  :key="key" v-if="statusinquiry == key || statusinquiry == 0">
								<div class="grid-content"><a @click="userdata(key,$event)">{{item.user_id}}</a></div>
								<div class="grid-content">{{item.nickName}}</div>
								<div class="grid-content"><a @click="coupondata(key,$event)">{{item.coupon_id}}</a></div>
								<div class="grid-content"><a @click="goodsdata(key,$event)">{{item.goods_id}}</a></div>
								<div class="grid-content"><a @click="shopsdata(key,$event)">{{item.bus_id}}</a></div>
								<div class="grid-content">{{item.name}}</div>
								<!-- <div class="grid-content">{{item.id}}</div> -->
								<div class="grid-content">{{item.create_time}}</div>
							</el-checkbox>
						</el-checkbox-group>
					</div>
					<!-- 最下面的功能栏,分页跟全选的效果 -->
					<div class="nled-sort-features">
						<!-- 全选 -->
						<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
						<!-- 分页 -->
						<div class="block"><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" 
						 :page-size="pagesizes" layout="total, sizes, prev, pager, next, jumper" :total="80"> </el-pagination> </div>
					</div>
					
				</div>
				
			</div>
			
		</div>
		
		<router-view />
	</div>
</template>

<script>
	import {date} from "../js/time.js"
	export  default {
		data(){
			return{
				login: '',
				checkAll: false,//单选状态绑定
				checkedCities: [],//全选赋值的的空数组
				ticket: [],//优惠券的空数组，也是多选的赋值数组
				isIndeterminate: true,//全选状态绑定
				statusinquiry:0,//优惠券状态的切换
				typestate:[
					{id:0,name:"总数量",type:"全部",state:"全部",residue:"7张",result: ""},
					{id:1,name:"总用户",type:"满减券",state:"进行",residue:"",result: ""},
					{id:2,name:"总商家",type:"折扣券",state:"已失效",residue:"",result: ""},
					{id:3,name:"总金额",type:"运费券",state:"已停止",residue:"7￥",result: ""},
					{id:4,type:"随机券"}
				],//计算结果的空数组
				activeIndex: '1',//纵向导航栏的状态值s
				pagesizes: 10,//分页单页数据条数
				currentPage4: 1,//分页默认显示的页数
				form: {
					name: '',
					region: '0'
				},
				// transfer: '',
			}
		},
		methods: {
			onSubmit() {//form表单的函数，实验用的，用来打印select下拉框的值
				console.log(this.form.region);
			},
			//全选函数
			handleCheckAllChange(val) {//val为true时，把声明的数组赋值给data内的函数，在页面渲染，达到全选的效果
				this.checkedCities = val ? this.ticket : [];
				this.isIndeterminate = false;
			},
			//单选函数
			handleCheckedCitiesChange(value) {
				let checkedCount = value.length;//把默认选项的数组赋值给checkedCount（也就是选中后在页面渲染的数组）
				this.checkAll = checkedCount === this.ticket.length; //单选没全选之前都是false，全选样式为-，全部选中后为true，全选样式改变为勾
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.ticket.length;//判断每次单选是否符合全选条件，相应的赋值
				// console.log(checkedCount,value,this.isIndeterminate,this.checkAll)
			},
			//状态切换函数，绑定函数时，把循环的key（index）！！！暂时用不上，没有相应的数据状态
			// statequiry(item,index){
			// 	const that = this
			// 	if(that.statusinquiry == index){
			// 		return false
			// 	}else{s
			// 		that.statusinquiry = index
			// 	}
			// },
			// 分页的每页数据条数的函数，后期接口达到数据在这里赋值
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {// 分页的当前分页数的函数
				console.log(`当前页: ${val}`);
			},
			//最上面的四个总数量
			sumrequest(api,o){
				const that = this
				const axios = require('axios');
				let resultdata = JSON.stringify({'wxapp_id':11})
				let state = that.typestate
				axios({
					method: 'post',
					url: api,
					data: resultdata,
					headers: { "Content-Type": "application/JSON" },		
				}).then(resp=>{
					let respdata = resp.data.data
					//总优惠券数
					if( o === 0){
						state[o].result = respdata.num + "张"
					}
					//总用户和总商家赋值
					else if(o>0 && o<3){
						state[o].result = respdata.num
					}
					//总金额赋值
					else{
						let sum = 0
						for(var w=0;w<respdata.length;w++){
							sum += Number(respdata[w].reduce_price)
						}
						state[o].result = parseInt(sum*100)/100 + "￥"
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			// 列表接口调用数据的函数
			requestgoods(){
				// 方法赋值变量简化写法，提高可读性
				const axios = require('axios');
				const that = this
				axios({
					method: 'post',
					url:"/api/api/coupon/coupon.php",
					headers: { "Content-Type": "application/JSON" },		
				})
				//箭头函数，方便数据获取，缩减代码（then,成功获取数据的处理函数）
				.then(resp => {
					that.ticket = resp.data.data
					let tick = that.ticket
					//拿到的数据计算结果
					var coupon=0,money=0;//声明两个零时变量，记录计算结果用
				    for(var i=0;i<tick.length;i++){
						if(tick[i].coupon_id){//优惠券总数计算
							coupon += Number(tick[i].coupon_id)
						}
						if(tick[i].user_id){//总金额，目前接口没有相应的数据，用的店长id代替的
							money += Number(tick[i].user_id)
						}
						if(tick[i].create_time){//时间转换,
							tick[i].create_time = date(tick[i].create_time)
						}
					}
					
				})
				//请求失败的返回函数
				.catch(err => {console.log(err)})
			},
			//用户名详情的路由传值数据处理，this.$router.push,使用编程式导航使用name进行跳转，标签不做跳转
			userdata(key,event){
				this.$router.push({
					name: 'sing',
					query: {user_id:event.target.innerHTML}
				})
			},
			//优惠券详情的路由传值数据处理//带父级的下边的数据，用于后期接口多数据显示详情{id:key,goods_id:event.target.innerHTML}
			coupondata(key,event){
				this.$router.push({
					name: 'sing',
					query: {coupon_id:event.target.innerHTML}
				})
			},
			//商品详情的路由传值数据处理
			goodsdata(key,event){
				this.$router.push({
					name: 'sing',
					query: {goods_id:event.target.innerHTML} 
				})
			},
			//商家详情的路由传值函数处理
			shopsdata(key,event){
				this.$router.push({
					name: 'sing',
					query: {bus_id:event.target.innerHTML}
				})
			},
		},
		//生命周期函数，测试用的。。。
		mounted() {
			this.requestgoods()//刷新即执行
			//登录状态保留
			if (sessionStorage.getItem("login")) {
				this.login = JSON.parse(sessionStorage.getItem("login"))
			}
			//用事件句柄监听，在页面刷新时将vuex里的信息保存到sessionStorage里
			if(this.login.checked === true){
				window.addEventListener("beforeunload", () => {
					if(this.login.state === false){
						this.login.state = true
						sessionStorage.setItem("login", JSON.stringify(this.login));
					}else{return}
				});
			}else{return}
			
			//总数的接口，用for循环加switch判断，执行四次调用四次拿到全部数据
			var api = 0
			for(var o=0;o<4;o++){
				switch(o){
					case 0:  //总优惠券接口
						api = '/api/api/coupon/total_coupon.php'
						this.sumrequest(api,o) 
						break;
					case 1:  //总用户接口
						api = '/api/api/coupon/total_users.php'
						this.sumrequest(api,o) 
						break;
					case 2:  //总商家接口
						api = '/api/api/coupon/total_business.php'
						this.sumrequest(api,o) 
						break;
					case 3:  //总金额接口
						api = '/api/api/coupon/total_price.php'
						this.sumrequest(api,o) 
						break;
					default: return
				}
			}
		}
	}
</script>

<style>
	/* 默认样式清除 */
	input{  
		background:none;  
		outline:none;  
		border:1px solid #ccc;
	}
	h4,p{
		display: inline;
	}
	select{
		border:1px solid #ccc;
	}
	a {
		color: #409eff;
		padding: 0 10px;	
		text-decoration:none;
	}
	a:hover{
		text-shadow: 1px 1px 2px #fbff00;
	}
	
	/* coupon的样式设置 */
	.coupon{
		width: 100%;
		/* min-width: 922px;         /* 列表加元素要调整宽度 */ 
	}
	
	/* 创建优惠券 */
	.nle-classify{
		display: flex;
		justify-content: space-between;
        height: 130px;
		margin-bottom: 20px;
		font-size: 14px;
	}
	.nle-cla-tacit{
		width: 24%;
		line-height: 90px;
		padding: 12px;
		background-color: white;
		box-shadow: 1px 1px 3px #f5f5f5;
		box-sizing: border-box;
	}
	.nle-cla-tacit > .nle-cla-son-text{
		text-align: center;
	}
	div>h4>p.n-c-s-big{
		font-size: 15px;
		color: red;
	}
	.n-c-s-small{
		font-size: 12px;
		color: red;
	}
	.nle-cla-son{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 24%;
		height: 100%;
		padding: 12px;
		background-color: white;
		box-shadow: 1px 1px 3px #f5f5f5;
		box-sizing: border-box;
	}
	.nle-cla-son-data{
		display: flex;
		justify-content: space-between;
	}
	.nle-cla-son-residue{
		text-align: right;
	}
	.nle-cla-son-residue>p{
		color: #409eff;
	}
	
	/* 筛选和排序 */
	.nle-details{
		padding: 20px;
		background-color: white;
	}
	/* 条件查询以及删除 */
	.nle-det-screen{
		padding: 20px 50px;
		background-color: #f8f8f8;
		margin-bottom: 20px; 
	}
	.el-form-item{
		display: inline-block;
		width: 300px;
	}
	.nle-det-scr-term>div:nth-child(1){
		margin-right:20px;
	}
	.nds-term-alter{
		width: 150px;
	    height: 30px;
		margin-left: 20px;
	}
	.nle-det-scr-choice{
		display: flex;
		align-items: center;
		margin-left: 90px;
	}
	.nds-cho-btn{
		text-align: center;
		width: 70px;
		line-height: 35px;
		margin-right: 20px;
		color: white;
		background-color: #409eff;
		border-radius: 5px;
	}
	.nle-det-scr-choice>p{
	    color: #409eff;	
	}
	/* 优惠券的详细数据 */
	.el-checkbox{
		display: flex;
		align-items: center;
		width: calc(100% - 20px);
		min-height: 30px;		
		padding: 10px 10px;
		font-size: 20px;
		color: #909399;
	}
	/* 提示 */
	.n-d-s-hint{
		float: right;
		line-height: 60px;
		padding: 0 20px;
		font-size: 12px;
		color: #FF0004;
	}
	.nled-sdet-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50px;
		padding: 0 10px 0 34px;
		color: #409eff;
		background-color: #f2f2f2;
	}
	.el-checkbox:nth-child(even){
		background-color: #f2f2f2;
	}
	.el-checkbox__label{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: calc(100% - 10px);
	}
	.grid-content{
		text-align: center;
		white-space: normal;
		width: 12.5%;
		min-width: 100px;
	}
	.grid-content>a{
		color: #FF0000;
	}
	/* 最下面的功能栏,分页跟全选的效果 */
	.nled-sort-features{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
		border-top: 1px solid #f2f2f2;
	}
	/* 饿了吗插件的全选的类名跟上面的优惠券一样,单独重置一下样式 */
	div.nled-sort-features > .el-checkbox:last-of-type{
		width: auto;
		padding: 0 ;
		background-color: transparent;
	}
</style>
